<template>
  <view class="hpv-img">
    <image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="aspectFill" />
  </view>
  <!-- 筛选导航 -->
  <view class="tab-view">
    <view class="tab-toggle" v-for="(item, idx) in hpv_select" :key="idx" @click="tabToggle(item._id, idx)">
      <text>{{ item.name }}</text>
      <text :class="idx === checked ? 'checked' : ''"></text>
    </view>
  </view>
  <!-- 疫苗列表 -->
  <view class="hpv-list" v-for="(item, idx) in hpv_list" :key="idx">
    <view>
      <view class="hpv-type">{{ item.name }}</view>
      <view class="hpv-age">
        <text v-for="(v, i) in item.describe" :key="i">{{ v }}</text>
      </view>
      <view class="hpv-price">{{ `&yen;${item.price[0]}-&yen;${item.price[1]}` }}</view>
    </view>
    <view class="hpv-reserve" @click="toReserve(item._id,item.name,item.price,item.describe)" >去预约</view>
  </view>
  <!-- 高度 -->
  <view style="height:300rpx"></view>

    <!-- 骨架屏 -->
    <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { RequestApi } from '@/public/request'
import { Hpvselect, Hpvlist } from '@/public/decl-type'
//骨架屏
import skIndex from '@/Skeleton/SK-hpvlist.vue'

//骨架屏
let skeLeton = ref(true)

//导航选中
let checked = ref(0)
//筛选的导航
let hpv_select = ref<Hpvselect[]>([])
//疫苗列表
let hpv_list = ref<Hpvlist[]>([])
//存储用于筛选的疫苗数据
let hpv_all = ref<Hpvlist[]>([])
onMounted(async () => {
  //获取hpv页面数据
  const res: any = await RequestApi.OtuHpv()
  console.log('HPV疫苗列表: ', res);
  hpv_select.value = res.data.data[0].hpv_select
  hpv_list.value = res.data.data[0].hpv_list
  hpv_all.value = res.data.data[0].hpv_list
  skeLeton.value =false
})
//切换导航列表
const tabToggle = (id: string, idx: number) => {
  checked.value = idx
  if (id === "26da8e4962dc565503df9629704f1700") {//如果选中全部
    hpv_list.value = hpv_all.value
  } else {
    hpv_list.value = hpv_all.value.filter(item => item.hpv_id === id)
  }
}
//跳转详情页
const toReserve = (id:string,name:string,price:string[],describe:string[]) => { 
  let obj = JSON.stringify({id,name,price,describe})
  uni.navigateTo({
    url:`/pages/hpv-vaccine/hpv-buy?value=${obj}`
  })
 }
</script>

<style>
page {
  background-color: #fafafa;
}

.hpv-img {
  height: 350rpx;
}

.hpv-img image {
  height: 350rpx;
  width: 100%;
  display: block;
}

/* tab切换 */
.tab-view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
}

.tab-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100rpx;
  justify-content: center;
  position: relative;
}

.checked {
  width: 50rpx;
  height: 8rpx;
  background-color: #0d7cff;
  position: absolute;
  bottom: 0;
}

/* 疫苗列表 */
.hpv-list {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx;
}

.hpv-type {
  font-size: 35rpx;
}

.hpv-age {
  display: flex;
  align-items: center;
}

.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}

.hpv-reserve {
  align-self: flex-end;
  background-color: #0d7cff;
  padding: 15rpx 30rpx;
  border-radius: 40rpx;
  color: #ffffff;
}
</style>